<template>
  <!-- 歌曲榜单 -->
  <div class="songLeaderboardContainer container">
    <!-- 榜单分类 -->
    <div class="category">
      <ul>
        <li
          class="pointer"
          v-for="item in toplist"
          :key="item.id"
          @click="_changeToplist(item.id)"
          :class="{ active: Number(currentId) === item.id }"
        >
          <!-- 榜单封面 -->
          <div class="cover">
            {{ item.cover }}
          </div>
          <!-- 榜单信息 -->
          <div class="toplistInfo">
            <div class="name" :title="item.fullName">{{ item.fullName }}</div>
            <div class="updateFrequency" :title="item.updateFrequency">
              {{ item.updateFrequency }}
            </div>
          </div>
          <!-- 播放榜单 -->
          <div
            class="play"
            title="播放当前榜单歌曲"
            @click="playCurrentSonglist"
          >
            <play-one
              theme="filled"
              size="24"
              fill="#409EFF"
              class="iconfont"
              v-show="Number(currentId) === item.id"
            />
          </div>
        </li>
      </ul>
    </div>
    <!-- 歌曲列表 -->
    <div class="songList">
      <!-- 标题 -->
      <div class="title">
        <h1>歌曲列表</h1>
      </div>
      <SongList
        :songlist="songList"
        :height="'730px'"
        :isLoading="songlistLoadingStatus"
      />
    </div>
  </div>
</template>

<script name="SongTopList" setup>
import { PlayOne } from '@icon-park/vue-next';
import { allToplist } from '@/api/toplist';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { useRouter, onBeforeRouteUpdate, useRoute } from 'vue-router';
import playlistStore from '@/stores/playlistStore';
import { usePlaySong } from '@/hooks/usePlaySong';
import SongList from '@/components/SongList.vue';
import { playlistSong } from '@/api/song';
import { formatMilliseconds } from '@/utils/formatter';

const router = useRouter();
const { proxy } = getCurrentInstance();
const { playSong } = usePlaySong();
const route = useRoute();
const playlist = playlistStore();

let currentId = ref(route.query.id); // 当前榜单ID

let songlistLoadingStatus = ref(true); // 歌单加载状态

// 榜单歌曲列表
let toplistId = route.query.id;
let songList = reactive([]);
async function toplistSong(id) {
  songlistLoadingStatus.value = true;
  const res = (await playlistSong(id)).data;
  if (songList.length > 0) {
    songList.splice(0);
  }
  res.songs?.forEach((song) => {
    songList.push({
      id: song.id,
      name: song.name,
      singers: song.ar,
      album: song.alia[0] || song.al.name,
      duration: formatMilliseconds(song.dt),
    });
  });
  songlistLoadingStatus.value = false;
}

// 所有榜单
let toplist = reactive([]);
async function getAllToplist() {
  const res = (await allToplist()).data;
  res.list?.forEach((item) => {
    toplist.push({
      id: item.id,
      cover: item.name.slice(-3),
      fullName: item.name,
      updateFrequency: item.updateFrequency,
    });
  });
}

// 切换榜单
function changeToplist(id) {
  if (currentId.value === id) return;
  currentId.value = id;
  router.push(`songTopList?id=${id}`);
}
const _changeToplist = proxy.lodash.throttle(changeToplist, 1000); // 节流函数

// 播放当前榜单歌曲
function playCurrentSonglist() {
  playlist.changeSonglistSongs(songList);
  playlist.switchCurrentPlaylist('歌单/榜单列表');
  playSong(songList[0].id, 'auto');
}

function init() {
  getAllToplist();
  toplistSong(toplistId);
}

onMounted(() => {
  init();
});

onBeforeRouteUpdate((to) => {
  toplistSong(to.query.id);
});
</script>

<style lang="scss" scoped>
.songLeaderboardContainer {
  margin: 10px auto;
  height: 810px;
  padding: 10px;
  border: 1px solid #eee;
  background-color: #fff;
  display: flex;

  // 榜单分类
  .category {
    width: 300px;
    height: 100%;

    ul {
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      margin: 0;
      padding: 0;

      &::-webkit-scrollbar {
        display: none;
      }

      li {
        width: 100%;
        height: 70px;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &:first-child {
          margin: 0;
        }

        &:hover {
          background-color: $light-color;
        }

        // 榜单封面
        .cover {
          width: 60px;
          height: 60px;
          border-radius: 10px;
          background-image: linear-gradient(to right, #acb6e5, #86fde8);
          color: #fff;
          font-weight: bold;
          text-align: center;
          line-height: 60px;
          font-size: 14px;
        }

        // 榜单信息
        .toplistInfo {
          width: 165px;
          height: 60px;

          .name,
          .updateFrequency {
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }

          .name {
            font-size: 15px;
            color: #333;
          }

          .updateFrequency {
            color: #999;
            font-size: 13px;
          }
        }

        // 播放歌单
        .play {
          width: 30px;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  // 歌曲列表
  .songList {
    width: 880px;
    height: 100%;
    margin: 0 auto;

    .title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;

      h1 {
        margin-left: 10px;
        font-size: 20px;
        color: #333;
      }
    }
  }
}

.active {
  background-color: $light-color;
  position: sticky;
  top: 0;
  bottom: 0;
}
</style>
